<template>
  <div>
    <div
      class="dialog_wrap login_load"
      :style="'display: ' + $store.state.rblock + ';'"
    >
      <div
        class="login_system"
        :style="'display: ' + $store.state.rblock + ';'"
      >
        <p class="title">
          长沙市普通中小学入学报名系统<span
            class="floatright login_load_close"
            @click="dialogHide()"
            >X</span
          >
        </p>
        <div class="main">
          <div class="left">
            <div class="register_left_info">
              <p class="title">注册账号：</p>
              <p class="content">
                为方便及时联系，请使用本人常用联系手机号进行报名注册，注册手机号即为系统登录帐号
              </p>
            </div>
          </div>
          <div class="right">
            <div class="login_main">
              <p class="title">
                <span class="title_left">报名注册</span
                ><span class="title_right"
                  >已有账号？<a id="login" @click="switchLogin()"
                    >立即登录</a
                  ></span
                >
              </p>
              <ul class="login_ul">
                <li>
                  <label>注册账号</label>
                  <div class="inp_wrap250">
                    <input
                      type="text"
                      name="phoneNum"
                      id="phoneNum"
                      maxlength="11"
                      value=""
                      placeholder="输入手机号码用于系统登录及找回密码"
                    />
                  </div>
                </li>
                <li>
                  <label>验证码</label>
                  <div class="inp_wrap150 inp_yzm">
                    <input
                      type="text"
                      name="smsCode"
                      id="smsCode"
                      maxlength="6"
                      value=""
                      placeholder="输入短信验证码"
                    />
                  </div>
                  <span
                    class="img_yzm btn_green_white_short"
                    id="getYZM"
                    onclick="sendYZM(false)"
                    >获取验证码</span
                  >
                  <span
                    class="img_yzm btn_gray_white_nohover hide"
                    id="regetYZM"
                    >重新发送(<em>59</em>)</span
                  >
                </li>
                <li>
                  <label>账号密码</label>
                  <div class="inp_wrap250">
                    <input
                      type="password"
                      name="pwd"
                      id="newPwd"
                      value=""
                      placeholder="设置密码"
                    />
                  </div>
                </li>
                <li>
                  <button class="btn_green250 mt15 new" id="addUser">
                    注&nbsp;&nbsp;册
                  </button>
                </li>
              </ul>
            </div>
          </div>
          <p class="warmming">
            注意：一天内最多可获取3次验证码，若有问题，请致电400-833-6011
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",

  data() {
    return {};
  },

  mounted() {},

  methods: {
    /**
     * 取消注册的对话框
     */
    dialogHide() {
      this.$store.commit("updateRD", "");
      console.log("register:", this.$store.state.rblock);
    },
    /**
     * 取消注册的对话框，打开登录的对话框
     */
    switchLogin() {
      this.$store.commit("updateRD", "");
      this.$store.commit("updateLD", "block");
    },
  },
};
</script>

<style scoped>
.register_left_info {
    width: 260px;
    height: 220px;
    background: #f6f6f6;
    text-align: left;
}
.main>.left>.register_left_info>.title {
    font-size: 16px;
    color: #000;
    line-height: 30px;
    padding: 50px 30px 0;
} 
.main>.left>.register_left_info>.content {
    font-size: 14px;
    color: #909090;
    line-height: 25px;
    padding: 10px 30px;
} 
</style>